import React from 'react'
import { Card, Image } from 'semantic-ui-react'
import Styled from 'styled-components'

const StyledCard = Styled.div`
  .card:hover {
    cursor: pointer;
    border: 1px solid #2185d0!important;
  }
  .active {
    border: 2px solid #2185d0;
  }
  .img:hover {
    cursor: pointer;
  }
  .active:hover {
    cursor: pointer;
    border: 2px solid #2185d0!important;
  }
`
export default ({ active, image, ...others }) => {
  let classN
  if (active) {
    classN = 'card active'
  } else {
    classN = 'card'
  }
  return (
    <StyledCard>
      <Card
        className={classN}
        image={<Image className="img" src={image} size="medium" disabled={!active} />}
        {...others}
      />
    </StyledCard>
  )
}
